import React, {Component} from 'react'
import {InterfaceWrapper, ProgressWrapper} from './styled'
import {Button, Modal, Progress} from 'antd'
import {connect} from 'react-redux'
import {actionFunc} from './store'

class Interface extends Component {
    render() {
        this.handleOk = this.props.handleOk.bind(this)
        const {
            wanCount,
            name,
            status,
            imgClass,
            handleClick,
            visible,
            confirmLoading,
            modalText,
            handleCancel,
            modalTitle,
            progressVisible,
            progressPercent,
            progressActive,
        } = this.props
        const progressProps = {
            percent: progressPercent,
            status: progressActive,
            className: 'progress',
        }
        return (
            <InterfaceWrapper wanCount={wanCount}>
                <div className={`interface-icon ${imgClass}`}></div>
                {name}
                {
                    status &&
                    <Button type='primary' className='button'
                            onClick={handleClick}>{wanCount === 1 ? 'SET TO WAN' : 'SET TO LAN'}</Button>
                }
                <Modal
                    title={modalTitle}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                >
                    <p dangerouslySetInnerHTML={{__html: modalText}}/>
                    <ProgressWrapper progressVisible={progressVisible}>
                        <Progress {...progressProps} />
                    </ProgressWrapper>
                </Modal>
            </InterfaceWrapper>
        )
    }
}

const mapState = (state) => ({
    visible: state.getIn(['interfaceMode', 'visible']),
    confirmLoading: state.getIn(['interfaceMode', 'confirmLoading']),
    modalText: state.getIn(['interfaceMode', 'modalText']),
    modalTitle: state.getIn(['interfaceMode', 'modalTitle']),
    progressVisible: state.getIn(['interfaceMode', 'progressVisible']),
    progressPercent: state.getIn(['interfaceMode', 'progressPercent']),
    progressActive: state.getIn(['interfaceMode', 'progressActive']),
})
const mapDispatch = (dispatch) => ({
    handleClick() {
        dispatch(actionFunc.changeModalStatus({visible: true}))
    },
    handleOk() {
        dispatch(actionFunc.changeModalStatus({confirmLoading: true}))
        let num = 1
        this.props.wanCount === 1 ? num = 2 : ''
        dispatch(actionFunc.interfaceSet(num))
    },
    handleCancel() {
        dispatch(actionFunc.changeModalStatus({visible: false}))
    }
})

export default connect(mapState, mapDispatch)(Interface)
